<!-- 我的信息 -->
<template>
  <div class="my-info" v-if="userInfo">
    <el-row>
      <el-col :span="4">{{userInfo.type==1?'用户名：':'企业名：'}}</el-col>
      <el-col :span="18" :offset="2">{{userInfo.name}}</el-col>
    </el-row>
    <el-row>
      <el-col :span="4" v-if="userInfo.type==2">营业执照：</el-col>
      <el-col :span="18" :offset="2">{{userInfo.unionCredit}}</el-col>
    </el-row>
    <el-row>
      <el-col :span="4" v-if="userInfo.type==2">法人代表：</el-col>
      <el-col :span="18" :offset="2">{{userInfo.legalName}}</el-col>
    </el-row>
    <el-row>
      <el-col :span="4">手机号码：</el-col>
      <el-col :span="18" :offset="2">{{userInfo.phone}}</el-col>
    </el-row>
    <el-row>
      <el-col :span="4">证件类型：</el-col>
      <el-col :span="18" :offset="2">身份证</el-col>
    </el-row>

    <el-row>
      <el-col :span="4">证件号：</el-col>
      <el-col :span="18" :offset="2">{{userInfo.idNo}}</el-col>
    </el-row>
    <el-row v-if="userInfo.auditState==2">
      <el-col :span="4">入会类型：</el-col>
      <el-col :span="18" :offset="2">{{memberType[userInfo.memberType]}}</el-col>
    </el-row>
    <el-row v-if="userInfo.auditState==2">
      <el-col :span="4">入会时间：</el-col>
      <el-col :span="18" :offset="2">{{userInfo.memberTime}}</el-col>
    </el-row>
    <el-row>
      <el-col :span="4">保证金：</el-col>
      <el-col :span="18" :offset="2">{{userInfo.earnestMoney}}</el-col>
    </el-row>
    <el-row style="background: #F7F7F7;" v-if="userInfo.type==2">
      <el-col :span="4">附件一：</el-col>
      <el-col :span="18" :offset="2">
        <span style="color: #0E2B70;" @click="enclosureClick(0)">营业执照</span>
      </el-col>
    </el-row>
    <el-row style="background: #F7F7F7;">
      <el-col :span="4">{{userInfo.type==1?'附件一：':'附件二：'}}</el-col>
      <el-col :span="18" :offset="2">
        <span style="color: #0E2B70;" @click="enclosureClick(3)">入会申请</span>
      </el-col>
    </el-row>

    <el-row style="background: #F7F7F7;">
      <el-col :span="4">{{userInfo.type==1?'附件二：':'附件三：'}}</el-col>
      <el-col :span="18" :offset="2">
        <span style="color: #0E2B70;" @click="enclosureClick(1)">身份证正面</span>
        <span style="color: #0E2B70;margin-left:64px" @click="enclosureClick(2)">身份证反面</span>
      </el-col>
    </el-row>

    <el-drawer size="50%" :title="drawerTitle" :visible.sync="drawer" direction="rtl">
      <div style="padding:20px">
        <el-image v-for="(item,index) in listData" :key="index" :src="item" fit="fit"></el-image>
      </div>
    </el-drawer>
  </div>
</template>


<script>
import {memberInfo, memberType, memberState} from '@/utils/setting'
import {customerInfo} from '@/api/user'
import store from '@/store'
export default {
  name: 'MyInfo',
  components: {},
  props: {},
  data() {
    return {
      userInfo: null,
      drawer: false,
      drawerTitle: '',
      listData: null,
      memberType,
      memberState
    }
  },
  computed: {},
  watch: {},
  methods: {
    enclosureClick(val) {
      this.drawer = true
      let arr = ['营业执照', '身份证正面', '身份证反面', '入会申请']
      this.drawerTitle = arr[val]
      this.userInfo.material.forEach(element => {
        if (element.type == val) {
          this.listData = []
          this.listData.push(element.storeUrl)
        }
      })
    },
    getInfo() {
      customerInfo().then(res => {
        let {
          data: {code, message, result, success}
        } = res
        this.userInfo = Object.assign({}, this.userInfo, result)
      })
    }
  },
  activated() {
    this.userInfo = store.getters.userInfo
    this.getInfo()
  },
  deactivated() {},
  created() {},
  mounted() {}
}
</script>


<style lang='less' scoped>
.my-info {
  font-size: 14px;
  color: #333333;
  line-height: 56px;

  > .el-row {
    margin-bottom: 10px;
    .el-col:first-child {
      text-align: right;
    }
    .el-col:last-child {
      text-align: left;
    }
  }
}
</style>